<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类型管理</title>
    <link rel="stylesheet" href="../static/bootstrap-3.4.1-dist/css/bootstrap.css">
</head>
<body>
<script type="text/javascript" src="/static/bootstrap-3.4.1-dist/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="static/vue.js"></script>
<div id="addType">
    <label for="level">级别：</label>
    <select id="level" @change="findc1()">
        <option>新增一级类型</option>
        <option>新增二级类型</option>
        <option>新增三级类型</option>
    </select>
    <label for="parent">选择父类：</label>
    <select name="parent" id="parent">
        <option v-for="type in types">{{type.name}}</option>
    </select>
</div>

<p>新增一个二级类型:</p>
<form action="/type" method="get">
    输入类别名称：
    <input type="text" name="name">
    选择一级父类:
    <select name="parent">
        <option value="1">家用电器</option>
        <option value="2">手机</option>
        <option value="3">运营商</option>
        <option value="4">数码</option>
        <option value="33">电脑</option>
        <option value="34">办公</option>
        <option value="43">美妆</option>
        <option value="44">个护清洁</option>
        <option value="45">宠物</option>
    </select>
    选择所在行数：
    <select name="info2" @chang>
        <option value="1">第一行</option>
        <option value="2">第二行</option>
        <option value="3">第三行</option>
        <option value="6">第六行</option>
    </select>
    <input type="hidden" name="level" value="2">
    <input type="hidden" name="method" value="add">
    <input type="submit">
</form>

<br><br><br>
<p>新增一个三级类型:</p>
<form action="/type" method="get">
    输入类别名称：
    <input type="text" name="name">
    选择二级父类:
    <select name="parent">
        <option value="5">电视</option>
        <option value="6">空调</option>
        <option value="7">洗衣机</option>
        <option value="8">冰箱</option>
        <option value="9">厨卫大电</option>
        <option value="10">厨卫小电</option>
        <option value="11">生活电器</option>
        <option value="12">个护健康</option>
        <option value="13">试听影音</option>

        <option value="231">面部护肤</option>
        <option value="232">香水彩妆</option>
        <option value="233">男士护肤</option>
        <option value="234">洗发护发</option>
        <option value="235">口腔护理</option>
        <option value="236">身体护理</option>
        <option value="237">女性护理</option>
        <option value="238">纸品清洗</option>
        <option value="239">家庭清洁</option>
        <option value="240">宠物生活</option>

    </select>
    选择所在行数：
    <select name="info2">
        <option value="1">第一行</option>
        <option value="2">第二行</option>
        <option value="3">第三行</option>
        <option value="6">第六行</option>
    </select>
    <input type="hidden" name="level" value="3">
    <input type="hidden" name="method" value="add">
    <input type="submit">
</form>


<script type="text/javascript">
    var typeVue=new Vue({
        el:"#addType",
        data:{
            msg:'hello Vue',
            age:10,
            url:'/static/img/lunbo/1.jpg',
            types:[{}]
        },
        methods:{
            findc1:function (){
                $.ajax({
                    url:"typeC2C3",
                    type: "GET",
                    dataType: 'json',
                    success:function (data) {
                        alert(data);
                        typeVue.types=data;
                    }
                })
            }
        }
    })
</script>
</body>
</html>